<template>
  <div class="app-container">
    <el-form ref="form" v-loading="loading" :rules="registerRules" :model="form" label-width="120px">
      <el-form-item label="ID" prop="id">
        <el-input v-model="form.id" :disabled="true" />
      </el-form-item>
      <el-form-item label="企业名称" prop="name">
        <el-input v-model="form.name" placeholder="河北省秦皇岛市xxx食品加工厂" />
      </el-form-item>
      <el-form-item label="企业类型" prop="type">
        <el-radio-group v-model="form.type">
          <el-radio :label="1">屠宰企业</el-radio>
          <el-radio :label="2">批发市场</el-radio>
          <el-radio :label="3">农贸市场</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="企业地址" prop="address">
        <el-input v-model="form.address" placeholder="河北省秦皇岛市海港区xxx" />
      </el-form-item>
      <el-form-item label="管理员ID" prop="manager_id">
        <el-input v-model="form.manager_id" />
      </el-form-item>
      <el-form-item label="经营许可证号">
        <el-input v-model="form.file_id" />
      </el-form-item>
      <el-form-item label="经营许可证图片">
        <el-upload
          action="https://jsonplaceholder.typicode.com/posts/"
          list-type="picture-card"
          accept="image/jpeg,image/png"
          multiple
          :file-list="form.fileList"
          :before-upload="onBeforeUpload"
          :on-success="onUploadSuccess"
          :limit="3"
          :on-exceed="handleExceed"
          :auto-upload="true"
          :http-request="imageUpload"
        >
          <i class="el-icon-plus" />
        </el-upload>
        <el-dialog :visible.sync="dialogVisible">
          <img width="100%" :src="dialogImageUrl" alt="">
        </el-dialog>
      </el-form-item>
      <el-form-item label="入库日期" prop="create_date">
        <el-date-picker v-model="form.create_date" type="date" placeholder="默认是今天" style="width: 100%;" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click.native.prevent="onSubmit">提交</el-button>
        <el-button @click="onCancel">返回</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { getInfoById, newData, uploadData, uploadImage } from '@/api/company'
export default {
  data() {
    return {
      newFlag: false,
      loading: true,
      dialogImageUrl: '',
      dialogVisible: false,
      disabled: false,
      form: {
        fileList: [],
        id: 0,
        name: '',
        type: 1,
        address: '',
        manager_id: 0,
        file_id: '0',
        create_date: new Date()
      },
      registerRules: {
        name: [{ required: true, trigger: 'blur', validator: (rule, value, callback) => {
          if (String(value).trim() === '') {
            callback(new Error('请输入名称'))
          } else {
            callback()
          }
        } }],
        address: [{ required: true, trigger: 'blur', validator: (rule, value, callback) => {
          if (String(value).trim() === '') {
            callback(new Error('请输入地址'))
          } else {
            callback()
          }
        } }],
        manager_id: [{ required: true, trigger: 'blur', validator: (rule, value, callback) => {
          if (String(value).trim() === '') {
            callback(new Error('请输入管理者ID'))
          } else {
            callback()
          }
        } }],
        type: [{ required: true }],
        create_date: [{ required: true, trigger: 'blur', validator: (rule, value, callback) => {
          if (String(value).trim() === '') {
            callback(new Error('请选择提交日期'))
          } else {
            callback()
          }
        } }]
      }
    }
  },
  created() {
    this.fetchData()
  },
  methods: {
    fetchData() {
      this.loading = true
      if (this.$route.query.type === 'new') {
        this.newFlag = true
      } else {
        getInfoById(this.$route.query.eid).then(response => {
          this.newFlag = false
          this.form = response.obj
          this.form.id = this.$route.query.eid
          this.loading = false
          console.log('success')
        })
      }
      this.loading = false
    },
    onSubmit() {
      this.$refs.form.validate(valid => {
        if (valid) {
          this.loading = true
          if (this.newFlag) {
            this.form.id = 0
            this.form.examine = 0
            newData(this.form).then(response => {
              this.loading = false
              this.$alert('提交成功', '成功', {
                confirmButtonText: '确定',
                callback: action => {
                  this.$router.go(-1)
                }
              })
            }).catch(() => { this.loading = false })
          } else {
            this.form.examine = 0
            uploadData(this.form).then(response => {
              this.loading = false
              this.$alert('提交成功', '成功', {
                confirmButtonText: '确定',
                callback: action => {
                  this.$router.go(-1)
                }
              })
            }).catch(() => { this.loading = false })
          }
        } else {
          this.$message({
            message: '请验证内容无误后再提交',
            type: 'warning'
          })
        }
      })
    },
    onCancel() {
      this.$router.go(-1)
    },
    handleRemove(file) {
      console.log(file)
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url
      this.dialogVisible = true
    },
    handleExceed(files, fileList) {
      this.$message({
        message: '最多上传三张图片!',
        type: 'warning'
      })
    },
    onBeforeUpload(file) {
      const isIMAGE = file.type === 'image/jpeg' || 'image/gif' || 'image/png'
      const isLt1M = file.size / 1024 / 1024 < 5

      if (!isIMAGE) {
        this.$message.error('上传文件只能是图片格式!')
      }
      if (!isLt1M) {
        this.$message.error('上传文件大小不能超过 5MB!')
      }
      this.$message('开始上传')
      return isIMAGE && isLt1M
    },
    imageUpload(params) {
      console.log(params.file)
      uploadImage(params.file).then((response) => {
        this.form.fileList.push(response.data.url)
      })
    },
    onUploadSuccess(response, file, fileList) {
      this.form.fileList = fileList
      this.$message({
        message: '上传成功',
        type: 'success'
      })
    }
  }
}
</script>

<style scoped>
.line{
  text-align: center;
}
</style>

